import React, {Component} from 'react';
import PropTypes from 'prop-types';
import PubSub from 'pubsub-js';
export default class CommentAdd extends Component {

    state = {
        username: '',
        content: ''
    }
    // 箭头函数是没有自己的this的，他使用的是上一级的this。在这里也就是组件对象
    // 原生的function 是有this的，但是默认是null，需要我们bind。显然使用箭头函数更方便
    handleSubmit = () => {
        // 收集数据,并封装成comment对象
        const comment = this.state;

        // 发布评论数据给父组件
        PubSub.publish("addComment", comment);

        // 清除输入数据
        this.setState({username: '', content: ''});
    }

    handleNameChange = (event) => {
        // 内容
        const username = event.target.value;
        this.setState({username});
    }
    handleContentChange = (event) => {
        // 内容
        const content = event.target.value;
        this.setState({content});

    }

    render() {
        const {username, content} = this.state;
        return (
            <div className="col-md-4">
                <form className="form-horizontal">
                    <div className="form-group">
                        <label>用户名</label>
                        <input type="text" className="form-control" placeholder="用户名"
                               value={username}
                               onChange={this.handleNameChange}/>
                    </div>
                    <div className="form-group">
                        <label>评论内容</label>
                        <textarea className="form-control" rows="6" placeholder="评论内容"
                                  value={content}
                                  onChange={this.handleContentChange}></textarea>
                    </div>
                    <div className="form-group">
                        <div className="col-sm-offset-2 col-sm-10">
                            <button type="button" className="btn btn-default pull-right"
                                    onClick={this.handleSubmit}>提交
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
};